<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>五角星评分案例</title>  
    <style>  
        * {  
            padding: 0;  
            margin: 0;  
        }  
        .comment {  
            font-size: 40px;  
            color: teal;  
        }  
        .comment li {  
            float: left;  
        }  
        ul {  
            list-style: none;  
        }  
    </style>  
</head>  
<body>  
<ul class="comment">  
    <li>☆</li>  
    <li>☆</li>  
    <li>☆</li>  
    <li>☆</li>  
    <li>☆</li>  
</ul>  
  <div><input type="datetime" /></div>
   <div><input type="datetime-local" /></div>
   <input type="radio" />
   
   
   <form action="/example/html/form_action.asp" method="get">
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car<br />
<input type="checkbox" name="vehicle" value="Airplane" /> I have an airplane<br />

</form>
<script src="js/jquery-1.11.3.js"></script>  
<script>  
    $(function () {  
        var wjx_k = "☆";  
        var wjx_s = "★";  
        //prevAll获取元素前面的兄弟节点，nextAll获取元素后面的所有兄弟节点  
        //end 方法；返回上一层  
        //siblings 其它的兄弟节点  
        //绑定事件  
        $(".comment li").on("mouseenter", function () {  
            $(this).html(wjx_s).prevAll().html(wjx_s).end().nextAll().html(wjx_k);  
        }).on("click", function () {  
            $(this).addClass("active").siblings().removeClass("active")  
        });  
        $(".comment").on("mouseleave", function () {  
            $("li").html(wjx_k);  
            $(".active").text(wjx_s).prevAll().text(wjx_s);  
        })  
    });  
</script>  
</body>  
</html>
